<!--
 * @Author: wangjian
 * 656876071@qq.com
 * @Date: 2024-10-09 15:12:27
 * @LastEditTime: 2024-10-09 16:16:26
 * @FilePath: src/views/subscriptions/WriteMobilePage.vue
 * @Description: 
 -->
<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import {onBeforeUnmount, ref, shallowRef, onMounted} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello</p>')

// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
  }, 1500)
})

const toolbarConfig = {}
const editorConfig = {placeholder: '请输入内容...'}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

const mode = 'default'
const previewHtml = ref('')
const preview = ref()

const handleChange = () => {
  const content = valueHtml.value
  preview.value.contentWindow.write(content)
  previewHtml.value = content
}
</script>

<template>
  <div style="display: flex;">
    <div style="border: 1px solid #ccc;width: 50%">
      <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
      />
      <Editor
          style="height: 500px; overflow-y: hidden;"
          v-model="valueHtml"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="handleCreated"
      />
      <button @click="handleChange">预览</button>
    </div>

    <iframe ref="preview" style="width: 387px;height: 768px;margin-left: 1rem" src="/preview.html"></iframe>
    
  </div>
</template>

<style scoped>

</style>